<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>

<!--
 1、导入vue.js index.js axios.js index.css
 2、写一个Vue的标准结构
 3、写业务代码
-->
<div id="app">
    <el-button type="primary" v-on:click="handleCreate">新增</el-button>
    <!-- v-for 遍历分页查询结果 -->
    <!--<table>
        <tr v-for="route in dataList">
            <td>{{route.rname}}</td>
            <td>{{route.price}}</td>
            <td>{{route.rimage}}</td>
            <td></td>
        </tr>
    </table>-->


    <el-table  :data="dataList" style="width: 100%">
        <el-table-column prop="rname" label="路线名称" width="380"> </el-table-column>
        <el-table-column prop="price" label="价格" width="180"> </el-table-column>
        <el-table-column label="图片" width="180">
            <template slot-scope="scope">
<!--                <img v-bind:src="'http://q3zgxekim.bkt.clouddn.com/' + scope.row.rimage" alt="">-->
                <el-image
                        style="width: 100px; height: 100px"
                        :src="'http://q3zgxekim.bkt.clouddn.com/' + scope.row.rimage"
                        :fit="fit"></el-image>
            </template>
        </el-table-column>
    </el-table>


    <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="pagination.currentPage"
            :page-size="pagination.pageSize"
            layout="prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>


    <el-dialog title="新增路线" :visible.sync="dialogVisibleAdd" width="50%">

        <el-form>
            <el-form-item label="线路名称">
                <el-input v-model="formData.rname"></el-input>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="formData.price"></el-input>
            </el-form-item>
            <el-form-item label="图片">
                <el-upload
                        class="avatar-uploader"
                        action="/setmeal/upload.do"
                        name="imgFile"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="rimage" :src="rimage" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <!--
          el-table
          Pagination
         -->

         <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibleAdd = false">取 消</el-button>
            <el-button type="primary" @click="handleAdd">确 定</el-button>
          </span>
    </el-dialog>

</div>


<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            dialogVisibleAdd:false,
            formData:{},
            rimage:'',
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:10,//每页显示的记录数
                total:0,//总记录数
                queryString:null//查询条件
            },
            dataList:[],
        },
        methods:{
            handleCreate(){
                //1、弹出新增框
                this.dialogVisibleAdd = true;
            },
            handleAvatarSuccess(res){
                console.log(res);
                //1、回显图片
                this.rimage = "http://q3zgxekim.bkt.clouddn.com/" +  res.data;
                //2、要把图片名称赋值给formData，要把图片信息保存到数据库
                this.formData.rimage = res.data;
            },
            beforeAvatarUpload(){
                //1、校验一下图片
                return true;
            },
            handleAdd(){
                //1、校验表单
                //2、提交路线信息保存到数据库
                console.log(this.formData);
                axios.post("/route/add.do",this.formData).then((res)=>{
                  //1、关闭弹框
                    this.dialogVisibleAdd = false;
                  //2、提示用户
                  //3、刷新页面
                    this.findPage();
                })
            },
            findPage(){
               //分页查询需要提交哪些数据
                //1、当前页码（默认第一页）
                //2、每页显示条数（固定的值10）
                axios.post("/route/findPage.do",this.pagination).then((res)=>{
                    //1、res.rows 数据给el-table 或者自己用v-for遍历
                    this.dataList = res.data.rows;
                    console.log(this.dataList);
                    //2、res.data.total 给分页组件，分页组件帮我们计算页码
                    this.pagination.total = res.data.total;
                })

            },
            handleCurrentChange(cpage){//cpage 当前点击的页码
                this.pagination.currentPage = cpage;
                this.findPage();
            }
        },
        created() {
            this.findPage();
        },
    })


</script>
</body>
</html>
